'use client';

import { useChain } from '@/context/ChainContext';
import { useAuthStore } from '@/store/auth';
import { Shield, CheckCircle, XCircle } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

export function ChainAuthStatus() {
  const { currentChain, chainConfig } = useChain();
  const { chainAuth } = useAuthStore();
  
  const mainnetAuth = chainAuth.mainnet.isAuthenticated;
  const testnetAuth = chainAuth.testnet.isAuthenticated;
  const currentAuth = chainAuth[currentChain].isAuthenticated;

  return (
    <TooltipProvider>
      <div className="flex items-center space-x-2">
        <Tooltip>
          <TooltipTrigger asChild>
            <div className="flex items-center space-x-1">
              <Shield className="h-4 w-4 text-muted-foreground" />
              <Badge 
                variant={currentAuth ? "success" : "secondary"}
                className="text-xs"
              >
                {chainConfig.displayName}
                {currentAuth ? (
                  <CheckCircle className="h-3 w-3 ml-1" />
                ) : (
                  <XCircle className="h-3 w-3 ml-1" />
                )}
              </Badge>
            </div>
          </TooltipTrigger>
          <TooltipContent>
            <div className="space-y-2">
              <p className="font-medium">Authentication Status</p>
              <div className="space-y-1 text-xs">
                <div className="flex items-center space-x-2">
                  <span className="w-16">Mainnet:</span>
                  {mainnetAuth ? (
                    <span className="text-green-500 flex items-center">
                      <CheckCircle className="h-3 w-3 mr-1" /> Authenticated
                    </span>
                  ) : (
                    <span className="text-muted-foreground flex items-center">
                      <XCircle className="h-3 w-3 mr-1" /> Not authenticated
                    </span>
                  )}
                </div>
                <div className="flex items-center space-x-2">
                  <span className="w-16">Testnet:</span>
                  {testnetAuth ? (
                    <span className="text-green-500 flex items-center">
                      <CheckCircle className="h-3 w-3 mr-1" /> Authenticated
                    </span>
                  ) : (
                    <span className="text-muted-foreground flex items-center">
                      <XCircle className="h-3 w-3 mr-1" /> Not authenticated
                    </span>
                  )}
                </div>
              </div>
            </div>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}